<template>
  <div class="vm-common-item-list">
    <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
      <ul class="content">
        <router-link tag="li" :to="'/require/details/' + item.bid " v-for="(item, key) in requireListData" :key="key" class="idx-item-box">
          <div :class="['idx-warp-l','vm-icon', item.iconClass]"></div>
          <div class="idx-warp-r">
            <div class="idx-r-t">
              <span class="t-type">{{ item.cPOType }}</span>
              <span class="t-time">{{ item.dCenterDate }}</span>
            </div>
            <p class="idx-r-b">{{ item.cIBidsTatle }}</p>
            <div class="idx-r-f">
              <span class="f-area">单位：{{ item.companyName }}</span>
              <span :class="['f-type', item.ClassName]">阶段：{{ item.iRangeStatus }}</span>
            </div>
          </div>
        </router-link>
      </ul>
    </mt-loadmore>
  </div>
</template>

<script>
import { getVmIndexRequireData } from '@/api/index.js'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      allLoaded: false,
      requirePage: 1,
      requireValue: ''
    }
  },
  created () {
    this.getRequireData(true);
  },
  mounted () {
    this.$root.Bus.$on('vmCommonSearchV', (value) => {
      this.requireValue = value;
      this.getRequireData(true);
    })
  },
  computed: {
    ...mapState({
      requireListData: state => state.require.requireListData,
      requireSearchHistory: state => state.require.requireSearchHistory
    })
  },
  methods: {
    getRequireData(reset, loadmoreType) {
      let data = {
        page: this.requirePage,
        companyname: this.requireValue
      };
      if (this.requireSearchHistory !== null) {
        Object.assign(data,this.requireSearchHistory);
      }
      getVmIndexRequireData({...data}).then(res => {
        if (!res.data.data.length) {
          this.allLoaded = true;
        }
        let resArr = res.data.data.map((item, key, arr) => {
          switch ( item.iRangeStatus ) {
            case '公告期':
              item.ClassName = 'announcementPeriod';
              break;
            case '投标期':
              item.ClassName = 'tender';
              break;
            case '新建':
              item.ClassName = 'create';
              break;
            case '评标期':
              item.ClassName = 'bidEvaluationPeriod';
              break;
            case '结束期':
              item.ClassName = 'end';
              break;
            case '工程设计':
              item.ClassName = 'ed';
              break;
          }
          switch ( item.cPOType ) {
            case '1':
              item.cPOType = '询比价';
              item.iconClass = 'inquiry';
              break;
            case '2':
              item.cPOType = '竞争性谈判';
              item.iconClass = 'competitiveness';
              break;
            case '3':
              item.cPOType = '单一来源';
              item.iconClass = 'singleSource';
              break;
            case '4':
              item.cPOType = '招投标';
              item.iconClass = 'bid';
              break;
            case '5':
              item.cPOType = '竞价采购';
              item.iconClass = 'competitivePrice';
              break;
            default:
              item.cPOType = '其他';
              item.iconClass = 'other';
              break;
          }
          return item;
        });
        if (reset) {
          this.$store.dispatch("storageRequireList", resArr);
        } else {
          this.$store.dispatch("storageRequireList", this.requireListData.concat(resArr));
        }
        if ( loadmoreType == 'top' ) {
          this.$refs.loadmore.onTopLoaded();
        } else if ( loadmoreType == 'bottom' ){
          this.$refs.loadmore.onBottomLoaded();
        }
      })
    },
    loadTop () {
      this.requirePage = 1;
      this.allLoaded = false;
      this.getRequireData(true, 'top');
    },
    loadBottom () {
      this.requirePage ++;
      this.getRequireData(false, 'bottom');
    }
  }
}
</script>

<style scoped>

</style>
